JavaScript 模式匹配 & 类型安全：编译时验证指南

模式匹配是现代编程中最强大和最具表现力的特性之一，长期以来在 Haskell、Rust 和 F# 等函数式语言中备受推崇。它允许开发人员解构数据并根据其结构执行代码，这种方式既简洁又易于阅读。随着 JavaScript 的不断发展，开发人员越来越希望采用这些强大的范例。然而，一个重要的挑战仍然存在：我们如何在 JavaScript 的动态世界中实现这些语言的强大类型安全和编译时保证？

答案在于利用 TypeScript 的静态类型系统。虽然 JavaScript 本身也在逐渐走向原生模式匹配，但其动态特性意味着任何检查都将在运行时发生，可能导致生产中出现意外错误。本文深入探讨了实现真正的编译时模式验证的技术和工具，确保您在编写代码时而不是在用户使用时发现错误。

我们将探索如何通过将 TypeScript 的强大功能与模式匹配的优雅性相结合，构建健壮、自文档化和抗错误的系统。准备好消除一整类运行时错误，并编写更安全、更易于维护的代码。

什么才是真正的模式匹配？

模式匹配的核心是一种复杂的控制流机制。它就像一个超级强大的 `switch` 语句。模式匹配不仅可以检查与简单值（如数字或字符串）的相等性，还可以检查值与复杂的“模式”是否匹配，如果找到匹配项，则将变量绑定到该值的某些部分。

让我们将其与传统方法进行对比：

旧方法：`if-else` 链和 `switch`

考虑一个计算几何形状面积的函数。使用传统方法，您的代码可能如下所示：

            
// Shape is an object with a 'type' property
function calculateArea(shape) {
  if (shape.type === 'circle') {
    return Math.PI * shape.radius * shape.radius;
  } else if (shape.type === 'square') {
    return shape.sideLength * shape.sideLength;
  } else if (shape.type === 'rectangle') {
    return shape.width * shape.height;
  } else {
    throw new Error('Unsupported shape type');
  }
}

            

              
                Copy
              
            
          

这可行，但它很冗长且容易出错。如果您添加了一个新的形状，例如 `triangle`，但忘记更新此函数怎么办？代码将在运行时抛出一个通用错误，这可能与实际引入 bug 的地方相去甚远。

模式匹配方法：声明式和富有表现力

模式匹配将此逻辑重构为更具声明性。您无需一系列命令式检查，而是声明您期望的模式以及要采取的行动：

            
// Pseudocode for a future JavaScript pattern matching feature
function calculateArea(shape) {
  match (shape) {
    when ({ type: 'circle', radius }): return Math.PI * radius * radius;
    when ({ type: 'square', sideLength }): return sideLength * sideLength;
    when ({ type: 'rectangle', width, height }): return width * height;
    default: throw new Error('Unsupported shape type');
  }
}

            

              
                Copy
              
            
          

关键优势立即显现：

• 解构：诸如 `radius`、`width` 和 `height` 之类的值会自动从 `shape` 对象中提取。
• 可读性：代码的意图更清晰。每个 `when` 子句都描述了一个特定的数据结构及其相应的逻辑。
• 穷尽性：这是类型安全最重要的好处。一个真正健壮的模式匹配系统可以在编译时警告您是否忘记处理可能的情况。这是我们的主要目标。

JavaScript 挑战：动态与安全

JavaScript 最大的优势——它的灵活性和动态性——也是它在类型安全方面的最大弱点。如果没有静态类型系统在编译时强制执行契约，那么纯 JavaScript 中的模式匹配将仅限于运行时检查。这意味着：

• 没有编译时保证：在您的代码运行并命中该特定路径之前，您不会知道您错过了一个案例。
• 静默失败：如果您忘记了默认情况，则不匹配的值可能只会导致 `undefined`，从而导致下游出现细微的 bug。
• 重构噩梦：向数据结构添加新变体（例如，新的事件类型、新的 API 响应状态）需要进行全局搜索和替换，以找到需要处理的所有位置。缺少一个可能会破坏您的应用程序。

这就是 TypeScript 彻底改变游戏规则的地方。它的静态类型系统允许我们精确地建模我们的数据，然后利用编译器来强制我们处理每一种可能的变体。让我们来探索一下如何做到这一点。

技术 1：可辨识联合的基础

对于启用类型安全的模式匹配，最重要的 TypeScript 特性是可辨识联合（也称为标记联合或代数数据类型）。这是一种强大的方式来建模一种可以是几种不同可能性的类型。

什么是可辨识联合？

可辨识联合由三个组件构成：

1. 一组不同的类型（联合成员）。
2. 具有字面量类型的公共属性，称为判别式或标签。此属性允许 TypeScript 缩小联合中特定类型的范围。
3. 一个组合所有成员类型的联合类型。

让我们使用此模式重新建模我们的形状示例：

            
// 1. Define the distinct member types
interface Circle {
  kind: 'circle'; // The discriminant
  radius: number;
}

interface Square {
  kind: 'square'; // The discriminant
  sideLength: number;
}

interface Rectangle {
  kind: 'rectangle'; // The discriminant
  width: number;
  height: number;
}

// 2. Create the union type
type Shape = Circle | Square | Rectangle;

            

              
                Copy
              
            
          

现在，类型为 `Shape` 的变量必须是这三个接口之一。`kind` 属性充当解锁 TypeScript 类型缩小功能的密钥。

实现编译时穷尽性检查

有了我们的可辨识联合，我们现在可以编写一个由编译器保证处理每一种可能形状的函数。神奇的成分是 TypeScript 的 `never` 类型，它表示一个不应该发生的值。

我们可以编写一个简单的辅助函数来强制执行此操作：

            
function assertUnreachable(x: never): never {
  throw new Error("Didn't expect to get here");
}

            

              
                Copy
              
            
          

现在，让我们使用标准的 `switch` 语句重写我们的 `calculateArea` 函数。观察 `default` 情况下会发生什么：

            
function calculateArea(shape: Shape): number {
  switch (shape.kind) {
    case 'circle':
      // TypeScript knows `shape` is a Circle here!
      return Math.PI * shape.radius ** 2;

    case 'square':
      // TypeScript knows `shape` is a Square here!
      return shape.sideLength ** 2;

    case 'rectangle':
      // TypeScript knows `shape` is a Rectangle here!
      return shape.width * shape.height;

    default:
      // If we've handled all cases, `shape` will be of type `never`
      return assertUnreachable(shape);
  }
}

            

              
                Copy
              
            
          

此代码编译完美。在每个 `case` 块中，TypeScript 都已将 `shape` 的类型缩小为 `Circle`、`Square` 或 `Rectangle`，允许我们安全地访问诸如 `radius` 之类的属性。

现在是神奇的时刻。让我们向我们的系统引入一个新的形状：

            
interface Triangle {
  kind: 'triangle';
  base: number;
  height: number;
}

type Shape = Circle | Square | Rectangle | Triangle; // Add it to the union

            

              
                Copy
              
            
          

一旦我们将 `Triangle` 添加到 `Shape` 联合中，我们的 `calculateArea` 函数将立即产生编译时错误：

            
// In the `default` block of `calculateArea`:

return assertUnreachable(shape);
//                      ~~~~~
// Argument of type 'Triangle' is not assignable to parameter of type 'never'.

            

              
                Copy
              
            
          

这个错误非常有价值。TypeScript 编译器告诉我们，“您承诺处理每一种可能的 `Shape`，但您忘记了 `Triangle`。`shape` 变量在默认情况下仍然可以是 `Triangle`，并且不可分配给 `never`。”

要修复此错误，我们只需添加缺失的案例。编译器成为我们的安全网，保证我们的逻辑与我们的数据模型保持同步。

            
// ... inside the switch
    case 'triangle':
      return 0.5 * shape.base * shape.height;

    default:
      return assertUnreachable(shape);
// ... now the code compiles again!

            

              
                Copy
              
            
          

这种方法的优点和缺点

• 优点：
  • 零依赖：它仅使用核心 TypeScript 功能。
  • 最大类型安全：提供铁定的编译时保证。
  • 卓越的性能：它编译为高度优化的标准 JavaScript `switch` 语句。
• 缺点：
  • 冗长：`switch`、`case`、`break`/`return` 和 `default` 样板代码可能让人感到笨拙。
  • 不是表达式：`switch` 语句不能直接返回或分配给变量，从而导致更多命令式代码样式。

技术 2：使用现代库的符合人体工程学的 API

虽然带有 `switch` 语句的可辨识联合是基础，但它的样板代码可能很繁琐。这导致了出色的开源库的兴起，这些库为模式匹配提供了更具功能性、表现力和符合人体工程学的 API，同时仍然利用 TypeScript 的编译器来实现安全性。

介绍 `ts-pattern`

此领域中最受欢迎和功能强大的库之一是 `ts-pattern`。它允许您使用流畅、可链接的 API 替换 `switch` 语句，该 API 用作表达式。

让我们使用 `ts-pattern` 重写我们的 `calculateArea` 函数：

            
import { match } from 'ts-pattern';

function calculateAreaWithTsPattern(shape: Shape): number {
  return match(shape)
    .with({ kind: 'circle' }, (s) => Math.PI * s.radius ** 2)
    .with({ kind: 'square' }, (s) => s.sideLength ** 2)
    .with({ kind: 'rectangle' }, (s) => s.width * s.height)
    .with({ kind: 'triangle' }, (s) => 0.5 * s.base * s.height)
    .exhaustive(); // This is the key to compile-time safety
}

            

              
                Copy
              
            
          

让我们分解一下发生了什么：

• `match(shape)`：这会启动模式匹配表达式，并获取要匹配的值。
• `.with({ kind: '...' }, handler)`：每个 `.with()` 调用都定义一个模式。`ts-pattern` 非常聪明，可以推断出第二个参数（`handler` 函数）的类型。对于模式 `{ kind: 'circle' }`，它知道处理程序的输入 `s` 的类型将为 `Circle`。
• `.exhaustive()`：此方法等效于我们的 `assertUnreachable` 技巧。它告诉 `ts-pattern` 必须处理所有可能的情况。如果我们删除 `.with({ kind: 'triangle' }, ...)` 行，`ts-pattern` 将在 `.exhaustive()` 调用时触发编译时错误，告诉我们匹配不详尽。

`ts-pattern` 的高级功能

`ts-pattern` 远远超出了简单的属性匹配：

• 使用 `.when()` 进行谓词匹配：根据条件进行匹配。

              
  match(input)
    .when(isString, (str) => `It's a string: ${str}`)
    .when(isNumber, (num) => `It's a number: ${num}`)
    .otherwise(() => 'It is something else');
  
              
  
                
                  Copy
                
              
            

• 深度嵌套模式：匹配复杂的对象结构。

              
  match(user)
    .with({ address: { city: 'Paris' } }, () => 'User is in Paris')
    .otherwise(() => 'User is elsewhere');
  
              
  
                
                  Copy
                
              
            

• 通配符和特殊选择器：使用 `P.select()` 来捕获模式中的值，或使用 `P.string`、`P.number` 来匹配某种类型的任何值。

              
  import { match, P } from 'ts-pattern';
  
  match(event)
    .with({ type: 'USER_LOGIN', user: { name: P.select() } }, (name) => {
      console.log(`${name} logged in.`);
    })
    .otherwise(() => {});
  
              
  
                
                  Copy
                
              
            

通过使用像 `ts-pattern` 这样的库，您可以获得两全其美：TypeScript 的 `never` 检查的强大编译时安全性，以及干净、声明式和极具表现力的 API。

未来：TC39 模式匹配提案

JavaScript 语言本身正朝着获得原生模式匹配的方向发展。TC39（标准化 JavaScript 的委员会）中有一个积极的提案，建议向该语言添加 `match` 表达式。

建议的语法

语法可能如下所示：

            
// This is proposed JavaScript syntax and might change
const getMessage = (response) => {
  return match (response) {
    when ({ status: 200, body: b }) { return `Success with body: ${b}`; }
    when ({ status: 404 }) { return 'Not Found'; }
    when ({ status: s if s >= 500 }) { return `Server Error: ${s}`; }
    default { return 'Unknown response'; }
  }
};

            

              
                Copy
              
            
          

类型安全怎么样？

这是我们讨论的关键问题。就其本身而言，原生的 JavaScript 模式匹配功能将在运行时执行其检查。它不会知道您的 TypeScript 类型。

但是，几乎可以肯定的是，TypeScript 团队将在这种新语法之上构建静态分析。正如 TypeScript 分析 `if` 语句和 `switch` 块以执行类型缩小一样，它也会分析 `match` 表达式。这意味着我们最终可以获得最佳结果：

1. 原生、高性能的语法：无需库或转译技巧。
2. 完全编译时安全：TypeScript 将检查 `match` 表达式是否针对可辨识联合具有穷尽性，就像今天对 `switch` 所做的那样。

在我们等待此功能通过提案阶段并进入浏览器和运行时期间，我们今天讨论的具有可辨识联合和库的技术是可用于生产的、最先进的解决方案。

实际应用和最佳实践

让我们看看这些模式如何应用于常见的实际开发场景。

状态管理（Redux、Zustand 等）

使用操作管理状态是可辨识联合的完美用例。不要对操作类型使用字符串常量，而是为所有可能的操作定义一个可辨识联合。

            
// Define actions
interface IncrementAction { type: 'counter/increment'; payload: number; }
interface DecrementAction { type: 'counter/decrement'; payload: number; }
interface ResetAction { type: 'counter/reset'; }

type CounterAction = IncrementAction | DecrementAction | ResetAction;

// A type-safe reducer
function counterReducer(state: number, action: CounterAction): number {
  return match(action)
    .with({ type: 'counter/increment' }, (act) => state + act.payload)
    .with({ type: 'counter/decrement' }, (act) => state - act.payload)
    .with({ type: 'counter/reset' }, () => 0)
    .exhaustive();
}

            

              
                Copy
              
            
          

现在，如果您向 `CounterAction` 联合添加一个新操作，TypeScript 将强制您更新 reducer。不再有遗忘的操作处理程序！

处理 API 响应

从 API 获取数据涉及多个状态：加载、成功和错误。使用可辨识联合对此进行建模可以使您的 UI 逻辑更加健壮。

            
// Model the async data state
type RemoteData =
  | { status: 'idle' }
  | { status: 'loading' }
  | { status: 'success'; data: T }
  | { status: 'error'; error: E };

// In your UI component (e.g., React)
function UserProfile({ userId }: { userId: string }) {
  const [userState, setUserState] = useState>({ status: 'idle' });

  // ... useEffect to fetch data and update state ...

  return match(userState)
    .with({ status: 'idle' }, () => 
Click a button to load the user.
)
    .with({ status: 'loading' }, () => )
    .with({ status: 'success' }, (state) => )
    .with({ status: 'error' }, (state) => )
    .exhaustive();
}

            

              
                Copy
              
            
          

此方法保证您为数据提取的每一种可能状态都实现了 UI。您不会意外地忘记处理加载或错误情况。

最佳实践摘要

• 使用可辨识联合建模：无论何时您的值可以是几种不同的形状之一，都使用可辨识联合。它是 TypeScript 中类型安全模式的基石。
• 始终强制执行穷尽性：无论您是使用带有 `switch` 语句的 `never` 技巧还是库的 `.exhaustive()` 方法，永远不要让模式匹配开放。安全性就来自这里。
• 选择正确的工具：对于简单的情况，`switch` 语句很好。对于复杂的逻辑、嵌套匹配或更具功能性的样式，像 `ts-pattern` 这样的库将显着提高可读性并减少样板代码。
• 保持模式可读：目标是清晰。避免过于复杂、难以一目了然的嵌套模式。有时，将匹配分解为更小的函数是一种更好的方法。

结论：编写安全 JavaScript 的未来

模式匹配不仅仅是语法糖；它是一种范例，可以产生更具声明性、可读性和——最重要的是——更健壮的代码。虽然我们热切地等待它在 JavaScript 中的原生到来，但我们不必等待才能获得它的好处。

通过利用 TypeScript 的静态类型系统的强大功能，特别是使用可辨识联合，我们可以构建可以在编译时验证的系统。这种方法从根本上将 bug 检测从运行时转移到开发时，从而节省了无数的调试时间并防止了生产事件。像 `ts-pattern` 这样的库建立在这个坚实的基础之上，提供了一个优雅而强大的 API，使编写类型安全的代码成为一种乐趣。

拥抱编译时模式验证是朝着编写更具弹性和可维护性的应用程序迈出的一步。它鼓励您显式地考虑您的数据可以处于的所有可能状态，消除歧义并使您的代码逻辑清晰明了。立即开始使用可辨识联合建模您的域，并让 TypeScript 编译器成为您构建无 bug 软件的不知疲倦的合作伙伴。